<template>
  <el-main>
      <el-card class="ep-card ep-search">
          <el-form :model="searchForm" label-width="80px">
              <el-row :gutter="20">
                  <el-col :span="9">
                      <el-form-item label="模板名称">
                          <el-input v-model="searchForm.name" placeholder="请输入模板名称"></el-input>
                      </el-form-item>
                  </el-col>
                <el-col :span="9">
                  <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
                  <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">新增</el-button>
                </el-col>
              </el-row>
          </el-form>
      </el-card>
      <el-card class="ep-card" style="height: calc(100vh - 280px);">
          <el-row style="margin-top: 10px;">
              <el-table
                  :data="tableData"
                  border
                  :height="height"
                  style="width: 100%">
                  <el-table-column
                      type="index"
                      label="序号"
                      align="center"
                      width="50">
                  </el-table-column>
                  <el-table-column
                      prop="name"
                      align="center"
                      width="180"
                      label="模板名称">
                  </el-table-column>
                  <el-table-column
                      prop="code"
                      align="center"
                      width="100"
                      label="模板编号">
                  </el-table-column>
                  <el-table-column
                      prop="version"
                      align="center"
                      width="180"
                      label="版本号">
                  </el-table-column>
                  <el-table-column
                      prop="isUsed"
                      align="center"
                      width="80"
                      label="是否启用">
                      <template slot-scope="scope">
                          <div v-for="item in flowState">
                                  <span v-if="item.key==scope.row.isUsed">
                                      {{item.label}}
                                  </span>
                          </div>
                      </template>
                  </el-table-column>

                  <el-table-column
                      prop="remarks"
                      align="center"
                      show-overflow-tooltip
                      label="备注">
                  </el-table-column>

                  <el-table-column
                      prop="name"
                      align="center"
                      label="操作"
                      width="240">
                      <template slot-scope="scope">
                          <el-button type="text" @click="view(scope.row)">查看</el-button>
                          <el-button type="text" @click="edit(scope.row)">修改</el-button>
                          <el-button type="text" @click="design(scope.row)">设计</el-button>
                         <el-button type="text" @click="deleteById(scope.row.id)">删除</el-button>
                          <el-button type="text" @click="deploy(scope.row.id)">发布</el-button>
                      </template>
                  </el-table-column>
              </el-table>
              <el-pagination
                  v-show="tableData.length > 0"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pager.page"
                  :page-sizes="[20, 40, 60, 80]"
                  :page-size="pager.size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pager.total">
              </el-pagination>
          </el-row>
      </el-card>
      <el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="dialogFormVisible" :before-close="handleFormClose">
          <el-form :model="workflowTemplate" ref="workflowTemplate">
              <el-form-item label="模板名称" label-width="120px">
                  <el-input v-model="workflowTemplate.name" :disabled="viewHide" placeholder="请输入模板名称"
                            autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="模板编号" label-width="120px"  v-show="editCode">
                  <el-input v-model="workflowTemplate.code" :disabled="viewHide"  placeholder="请输入模板编号"
                            autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="版本号" label-width="120px" >
                  <el-input v-model="workflowTemplate.version" :disabled="viewHide"  placeholder="请输入模板版本号"
                            autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="启用状态" label-width="120px">
                  <el-switch :disabled="viewHide"
                      v-model="useable"
                      @change = "stateChange"
                      active-color="#13ce66"
                      inactive-color="#ff4949">
                  </el-switch>
              </el-form-item>

              <el-form-item label="备注" label-width="120px" >
                  <el-input type="textarea"
                            :rows="2" v-model="workflowTemplate.remarks" :disabled="viewHide"  placeholder="请输入备注"
                            autocomplete="off"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" v-show="!viewHide">
              <el-button @click="handleFormClose">取 消</el-button>
              <el-button type="primary" @click="doSave">保 存</el-button>
          </div>
      </el-dialog>
      <el-dialog :fullscreen="fullscreen" title="流程设计器" :visible.sync="designerVisible" :before-close="handleDesignerClose">
          <div slot="title" class="header-title" style="margin-top: -13px">
              <span class="title-name" style="">流程设计器</span>
              <el-button type="primary" style="float:right;margin-right:50px;" @click="doDesign">保 存</el-button>
          </div>
          <iframe ref="ifrm" class="iframe" :src="designerUrl"></iframe>
      </el-dialog>
  </el-main>
</template>

<script src="@/pages/flow/js/flowDefList.js"></script>

<style scoped>
  .iframe {
      width: 100%;
      height: 100%;
      border: 0;
      overflow: hidden;
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
      left: 0;
      top: 54px;
  }
  .title-name{
      font-size: 24px;
  }
.el-table {
  width: 99.9% !important;
}
</style>
